<template>
  <Modal v-model="modelValue" @close="close">
    <el-descriptions title="items参数说明" :column="1" border>
      <el-descriptions-item label="label">
        同el-form-item的label
      </el-descriptions-item>
      <el-descriptions-item label="prop">
        同el-form-item的prop，同时也同于el-form的model对象的key
      </el-descriptions-item>
      <el-descriptions-item label="component">
        需要渲染的组件，目前仅有的可选值：input、select、checkbox、radio、date-picker、time-picker、switch、slider
      </el-descriptions-item>
      <el-descriptions-item label="value">
        el-form中model对象初始值
      </el-descriptions-item>
      <el-descriptions-item label="componentProps">
        组件的props，对应component中各个el组件的参数，像el-select、el-radio只需在componentProps传入options即可
      </el-descriptions-item>
    </el-descriptions>
    <el-divider border-style="dashed" />
    <el-descriptions title="事件" :column="1" border>
      <el-descriptions-item label="*">
        包含el-form的exposed方法
      </el-descriptions-item>
      <el-descriptions-item label="addItem">
        添加配置项(参数为object，同items参数中的配置)
      </el-descriptions-item>
      <el-descriptions-item label="removeItem">
        移除表单(根据prop移除)
      </el-descriptions-item>
      <el-descriptions-item label="getValues">
        获取表单值，当然你也可以像el-form参数一样传入一个model对象
      </el-descriptions-item>
      <el-descriptions-item label="setRules">
        设置表单验证规则，同el-form参数
      </el-descriptions-item>
    </el-descriptions>
  </Modal>
</template>

<script setup>
const modelValue = defineModel({ type: Boolean, default: false })
const emit = defineEmits(['close'])

function close() {
  modelValue.value = false
  emit('close')
}
</script>

<style scoped lang="scss">
:root {
  --el-table-row-hover-bg-color: transparent !important;
}
:deep(.el-table) {
  --el-table-row-hover-bg-color: transparent !important;
}

code {
  padding: $space-small 8px;
  background-color: rgb(244, 244, 248);
  font-size: $font-size-medium;
  border-radius: 4px;
}
</style>
